<!-- 切换设备侧边栏 -->
<template>
  <el-drawer
    custom-class="right-select-device"
    v-model="drawer"
    title="切换设备"
    size="300px"
    direction="rtl"
  >
    <div class="drawer-content">
      <el-input placeholder="请输入你需要搜索的设备编号、型号" v-model="searchValue" :suffix-icon="Search" @keyup.enter="searchDevice" />
      <div class="right-select-device-card">
        <div class="device-card-item" v-for="(item, index) in deviceList" :key="index" :class="item.id == currentId ? 'activate' : 'default'" @click="changeActivateCard(item.id)">
          <div class="device-card-item-header">
            <img :src="item.coverImage" width="24px" height="24px" style="border-radius: 50%;" alt=""/>
            <span style="margin-left: 8px; font-size: 14px; color: #000;">{{item.name}}</span>
          </div>
          <div class="device-card-item-content">
            <el-descriptions :column="1">
              <el-descriptions-item label="状态:">
                <el-tag type="success">
                  <div style="display: flex; align-items: center;">
                    <el-icon size="12"><CircleCheckFilled /></el-icon>
                    <span style="margin-left: 4px; font-size: 12px; color: #2DC24F">{{ item.status === 'ONLINE' ? '在线' : '离线' }}</span>
                  </div>
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="地址:">{{ item.location || '无' }}</el-descriptions-item>
              <el-descriptions-item label="编号:">{{ item.code || '无' }}</el-descriptions-item>
              <el-descriptions-item label="备注:">{{ item.remark || '无'}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { VacuumDeviceApi } from '@/api/vs/vacuumdevice'
import { CircleCheckFilled } from '@element-plus/icons-vue'

// 抽屉是否显示
const drawer = ref(false)

// 搜索文案
const searchValue = ref('')

const currentId = ref()
const openDrawer = (deviceId) => {
  drawer.value = true;
  currentId.value = deviceId
}

defineExpose({ openDrawer })


// 真空设备列表
const deviceList = ref([])

// 获取真空设备列表
const loadVacuumDeviceList = async() => {
  try {
    const res = await VacuumDeviceApi.getVacuumDeviceList()
    deviceList.value = res
  } catch (error) {
    console.log(error)
  }
}

onMounted(loadVacuumDeviceList)

const emit = defineEmits(['change'])

// 点击切换设备
const changeActivateCard = (id) => {
  currentId.value = id
  emit('change',id)
}

// 点击回车触发设备搜索
const searchDevice = () => {
  // TODO 等待真空设备搜索接口
}
</script>

<style lang="scss">
.right-select-device {
  .drawer-content {
    padding: 0 12px;

    .right-select-device-card {

      .device-card-item {
        margin-top: 12px;
        cursor: pointer;

        .device-card-item-header {
          display: flex;
          padding: 16px 8px 8px 16px;
          align-items: center;
          border-bottom: 1px solid #EDEFF0;
        }

        .device-card-item-content {
          padding: 16px;
          
          .el-descriptions__cell {
            padding: 0;
          }

        }

      }

    }

  }

  .el-drawer__body {
    padding: 0;
  }

  .el-drawer__header {
    padding: 12px;
    margin: 0;
  }

  .activate {
    border: 1px solid #004CFF;
    border-radius: 8px;
  }

  .default {
    border: 1px solid #E5E8EF;
    border-radius: 8px;
  }
  
}


</style>